<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :exportSrr="false"
      @exportHand="exportHand"
      label-width="100px"
    >
      <el-row :gutter="20">
        <!-- <el-col :span="8">
          <el-form-item label="所属节点：" prop="nodeId">
            <treeselect class="treeselect" style="width: 100%" v-model="queryParams.nodeId" :options="searchNodeListData"
              :normalizer="normalizer" :show-count="true" placeholder="请选择" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="资料类型：" prop="documentType">
            <el-select v-model="queryParams.documentType" style="width: 100%" placeholder="请选择" clearable>
              <el-option v-for="dict in dict.type.sys_document_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="资料格式：" prop="documentFormat">
            <el-select v-model="queryParams.documentFormat" style="width: 100%" placeholder="请选择" clearable>
              <el-option v-for="dict in dict.type.sys_document_format" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="关键字：" prop="nodeName">
            <el-input v-model="queryParams.nodeName" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="语言：" prop="languages">
            <el-select v-model="queryParams.languages" placeholder="请选择" style="width: 100%"
              @change="handleSearchNodeList">
              <el-option v-for="item in languages" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/approve/getProductDocument"
      row-key="nodeId"
      :queryParams="queryParams"
      :columns="columns"
      @onOperate="onOperate"
      requestWay="post"
      names="科研"
      :isTree="true"
      :pagination="true"
      :isExpandCollapse="false"
    >
      <template slot="tableTop"> </template>
      <template #status="{ row }">
        <dict-tag
          :options="dict.type.sys_business_status"
          :value="row.status"
        />
      </template>
      <template #operate="{ row }">
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('审批', row)"
        >
          审核
        </el-button>
        <!-- <el-button size="mini" type="text" class="ordinary-btn" @click="onOperate('预览', row)">
          预览
        </el-button>
        <el-button size="mini" type="text" class="ordinary-btn" @click="onOperate('下载', row)">
          下载
        </el-button> -->
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="458px"
      append-to-body
      :destroy-on-close="true"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="110px"
        size="mini"
      >
        <!-- <el-form-item label="所属节点：" prop="nodeId">
          <treeselect v-model="form.nodeId" :options="addNodeListData" :normalizer="normalizer" :show-count="true"
            placeholder="请选择所属节点" :disabled="selectDisabled" />
        </el-form-item> -->
        <el-form-item label="中文名称：" prop="nodeName">
          <el-input
            v-model="form.nodeName"
            placeholder="请输入中文名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="英文名称：" prop="nodeNameEn">
          <el-input
            v-model="form.nodeNameEn"
            placeholder="请输入英文名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="显示形式：" prop="displayType">
          <el-radio-group v-model="form.displayType" @change="changeDisplayType">
            <el-radio v-for="dict in displayTypes" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="图片：">
          <ImageUpload
            list-type="picture-card"
            :is-show-tip="false"
            @input="handleImg"
            :value="imgData"
          >
          </ImageUpload>
        </el-form-item>
        <!-- <el-form-item label="产品：" prop="productFlag">
          <el-radio-group v-model="form.productFlag" @change="handleAddNodeList">
            <el-radio v-for="dict in productFlags" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="所属平台：" prop="platformNodeId">
          <treeselect
            class="treeselect"
            style="width: 100%"
            :options="productPlatformData"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择所属平台"
            @select="changeProductPlatform"
          />
        </el-form-item>
        <el-form-item label="产品制式：" prop="formatNodeId">
          <treeselect
            class="treeselect"
            style="width: 100%"
            :options="productFormatData"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择产品制式"
            @select="changeProductFormat"
          />
        </el-form-item>
        <el-form-item label="产品运量：" prop="volumeNodeId">
          <treeselect
            class="treeselect"
            style="width: 100%"
            :options="productVolumeData"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择产品运量"
            @select="changeProductVolume"
          />
        </el-form-item>
        <!-- <el-form-item label="资料类型：" prop="documentType">
          <el-select v-model="form.documentType" style="width: 100%" placeholder="请选择" clearable>
            <el-option v-for="dict in dict.type.sys_document_type" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件格式：" prop="documentFormatRadio">
          <el-select style="width: 100%" v-model="form.documentFormatRadio" placeholder="请选择"
            @change="handleDocumentFormat">
            <el-option v-for="item in documentFormatRadio" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="名称：" v-show="!isShowUpload" prop="documentName">
          <el-input v-model="form.documentName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="链接：" v-show="!isShowUpload" prop="documentLink">
          <el-input v-model="form.documentLink" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="操作系统：" v-show="!isShowUpload" prop="os">
          <el-select v-model="form.os" style="width: 100%" placeholder="请选择" clearable>
            <el-option v-for="dict in dict.type.operating_system" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="资料权限:">
          <el-radio-group v-model="nodes1" @change="handleNotes">
            <el-radio label="1" key="1">厂内用户</el-radio>
            <el-radio label="2" key="2">厂外用户</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
        >
          确定
        </el-button>
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="open = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :title="previewTitle"
      :visible.sync="previewOpen"
      v-if="previewOpen"
      width="1200px"
      append-to-body
      :destroy-on-close="true"
    >
      <div style="height: 800px">
        <template-window :form-data="formData" :template-type="templateType" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="previewOpen = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="审批人"
      :visible.sync="approverShow"
      width="458px"
      append-to-body
      :destroy-on-close="true"
    >
      <approver ref="approver" />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitApprover"
        >
          确定
        </el-button>
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="approverShow = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import TablePanel1 from "@/components/TablePanel1/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import ImageUpload from "@/components/ImageUpload/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { serachNodeList, serachResNodeList } from "@/api/nodeManage/node";
import { addData, deleteData, sumbitData, toExamine } from "@/api/dataManage/index";
import { uploadImg, detailsImg, preview } from "@/api/file/index";
import { getproduct } from "@/api/approvalManage/processManage";
import { Base64 } from "js-base64";
import TemplateWindow from "@/views/components/template/index.vue";
import Approver from "@/views/components/Approver/index.vue";
import approveDialog from "@/views/approvalManage/approveList/components/Dialog.vue";

export default {
  components: {
    ImageUpload,
    TablePanel,
    QueryPanel,
    Treeselect,
    TemplateWindow,
    Approver,
    approveDialog,
    TablePanel1,

  },
  dicts: [
    "sys_business_status",
    "sys_document_type",
    "sys_document_format",
    "operating_system",
    "product_platform",
    "product_format",
    "product_volume"
  ],
  data() {
    return {
      queryParams: {
        nodeId: null,
        documentFormat: "",
        moduleType: 2, // 模板类型
        languages: "1",
        documentType: "",
        nodeName: "",
      },
      activeNames: "",
      searchNodeListData: [],
      addNodeListData: [],
      nodes1: "1",
      languages: [
        {
          value: '1',
          label: "中文",
        },
        {
          value: '2',
          label: "英文",
        },
      ],
      productFlags: [
        {
          value: "1",
          label: "是",
        },
      ],
      displayTypes: [
        {
          value: "1",
          label: "左侧菜单",
        },
        {
          value: "2",
          label: "右侧列表",
        },
      ],
      columns: [
        {
          field: "nodeName",
          label: "产品名称",
        },
        {
          field: "status",
          label: "状态",
          slots: { default: "status" },
        },
        {
          label: "操作",
          type: "custom",
          width: "470px",
          slots: { default: "operate" },
        },
      ],
      open: false,
      form: {
        nodeName: "",
        nodeNameEn: "",
        nodeId: "",
        languages: "1",
        moduleType: 2,
        platformNodeId: "",
        formatNodeId: "",
        volumeNodeId: "",
        field: 0
      },
      getimgurl: "",
      isImg: false,
      title: "审核页面",
      rules: {
        nodeName: [
          { required: true, message: "中文名称不能为空", trigger: "change" },
        ],
        // productFlag: [
        //   { required: true, message: "产品标识不能为空", trigger: "change" },
        // ],
        platformNodeId: [
          { required: true, message: "产品平台不能为空", trigger: "change" },
        ],
        formatNodeId: [
          { required: true, message: "产品制式不能为空", trigger: "change" },
        ],
        volumeNodeId: [
          { required: true, message: "产品运量不能为空", trigger: "change" },
        ],
      },
      selectDisabled: false,
      imgData: [],
      documentFormatRadio: [
        {
          value: "",
          label: "其他",
        },
        {
          value: "vr",
          label: "vr",
        },
        {
          value: "4",
          label: "图片",
        },
        {
          value: "5",
          label: "视频",
        },
      ],
      isShowUpload: true,
      storageType: "mongo",
      previewTitle: "",
      previewOpen: false,
      formData: null,
      templateType: "",
      approverShow: false,
      approverPArams: null,
      documentId: null,
      approverData: [],
      approverDetialShow: false,
      defaultProps: {
        label: "nodeName",
        children: "documentList"
      },
      productPlatformData: [],
      productFormatData: [],
      productVolumeData: []
    };
  },
  mounted() {
    this.init();
    this.handleQuery();
    this.getProduct()
  },
  methods: {
    async init() {
      // await this.getTreeselect();
    },
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 文件回调
    handleImg(str, aa) {
      if (typeof str === "boolean") {
        this.form.fileId = "";
      } else {
        this.form.fileId = str.data.fileId;
        this.form.documentName = str.data.name;
      }
    },
    // 表格操作列
    onOperate(type, row) {
      if (type === "下载") {
        detailsImg({ fileId: row.fileId }).then((res) => {
          if (res.data.storeId === null) {
            return this.$confirm(
              "该文件类型不支持直接下载，请在预览页面点击右键进行下载！"
            )
              .then(() => { })
              .catch(() => { });
            window.location.href = res.data.url;
          } else {
            window.location.href =
              process.env.VUE_APP_API_HOST +
              process.env.VUE_APP_BASE_API +
              "/file/mongod-download/" +
              res.data.storeId;
          }
        });
      } else if (type == '审批') {
        // this.storageType = "mongo";
        this.form = {
          languages: row.languages,
          moduleType: row.moduleType,
          nodeName: row.nodeName,
          nodeNameEn: row.nodeNameEn,
          nodeId: row.nodeId,
          platformNodeId: "",
          formatNodeId: "",
          volumeNodeId: "",
          field: row.field,
        },
          detailsImg({ fileId: row.fileId }).then((response) => {
            console.log(response);
            this.imgData.push({
              url: response.data.url,
              name: response.data.name,
            });
          });
        this.open = true;
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      }
      else {
        // 预览
        this.formData = row;
        if (row.documentFormat == "8") {
          this.$confirm(
            `
            建议配置：
            系统 win10 64位
            Cpu i7 7系列及以上
            内存 8G
            硬盘 SSD 500 G
            显卡 2060 6G显存及以上，提示
          `
          )
            .then(() => {
              window.location.href = row.documentLink;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消跳转VR",
              });
            });
        } else if (row.documentFormat == 5) {
          this.previewTitle = "视频";
          this.previewOpen = true;
          this.templateType = "视频";
        } else {
          let params = {
            fileId: row.fileId,
            fileName: row.documentName,
          };
          this.getFileUrl(params).then((res) => {
            if (res.code !== 200) {
              window.close();
              alert(res.msg);
              return;
            }
            window.open(res.preview, "_blank");
          });
        }
      }
    },
    // 
    changeDisplayType(value) {
      if (value == 2) {
        this.isImg = true;
      } else {
        this.isImg = false;
      }
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          toExamine(this.form).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "审批成功",
              });
              this.open = false;
              this.$refs.tablePanel.getTable();
            }
          })
        }
      })
    },
    // 查询预览url
    getFileUrl(file) {
      return new Promise((resolve) => {
        preview({ fileId: file.fileId }).then((res) => {
          if (res.code !== 200) {
            return resolve(res);
          }
          let storeId = res.data.storeId;
          let originUrl =
            storeId == null
              ? res.data.url
              : `${process.env.VUE_APP_API_HOST}${process.env.VUE_APP_BASE_API}/file/mongod-download/${storeId}`;
          originUrl += `?fullfilename=${file.fileName}`;
          let fininalUrl =
            process.env.VUE_APP_API_HOST +
            process.env.VUE_APP_BASE_API +
            "/kk-preview/onlinePreview?url=" +
            Base64.encode(originUrl);
          resolve({
            code: 200,
            downloadUrl: originUrl,
            preview: fininalUrl,
          });
        });
      }).catch((err) => {
        resolve({
          code: 500,
          msg: "服务器错误",
        });
      });
    },
    // 搜索条件节点查询
    handleSearchNodeList(data) {
      serachResNodeList({ moduleType: 2, languages: data }).then((res) => {
        this.searchNodeListData = res.rows;
      });
    },

    // 新增节点查询
    handleAddNodeList(data) {
      serachNodeList({ moduleType: 2, languages: data }).then((res) => {
        this.addNodeListData = res.rows;
      });
    },
    // 资料权限
    handleNotes(data) {
      this.form.notes = data
    },
    // 初始节点数据
    // getTreeselect() {
    //   serachResNodeList({ moduleType: 2, languages: 1 }).then((res) => {
    //     this.searchNodeListData = res.rows;
    //     this.addNodeListData = res.rows;
    //   });
    // },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
    // 文件格式
    handleDocumentFormat(key) {
      if (key === "vr") {
        this.isShowUpload = false;
      } else {
        this.isShowUpload = true;
      }
      if (Boolean(key) === false) {
        this.limit = 1;
        this.storageType = "mongo";
      } else {
        this.limit = 1;
        this.storageType = "local";
      }
    },
    // 提交审批人
    submitApprover() {
      this.approverPArams.candidateUsersList =
        this.$refs.approver.candidateUsersList;
      sumbitData(this.approverPArams).then((res) => {
        this.$message.success("操作成功！");
        this.approverShow = false;
        this.$refs.tablePanel.getTable();
      });

    },
    // 数据导出
    exportHand() {
      this.download('maintain//maintain/mDocument/export', {
        ...this.queryParams
      }, `job_${new Date().getTime()}.xlsx`)
    },

    changeProductPlatform(value) {
      this.form.platformNodeId = value.nodeId;
    },
    changeProductFormat(value) {
      this.form.formatNodeId = value.nodeId
    },
    changeProductVolume(value) {
      this.form.volumeNodeId = value.nodeId
    },
    // 得到产品制式 所属平台  产品运量
    getProduct() {
      getproduct().then((res) => {
        this.productPlatformData = res.rows.filter(item => {
          return item.nodeName == "产品平台"
        });
        this.productFormatData = res.rows.filter(item => {
          return item.nodeName == "产品制式"
        });;
        this.productVolumeData = res.rows.filter(item => {
          return item.nodeName == "产品运量"
        });;
      })
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .cell {
  span {
    font-size: 16px;
  }

  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    font-size: 16px;

    span {
      color: #333333e6;
    }
  }
}
</style>